<template>
  <header class="head" :style="{ 'padding-top': `${height}px` }">
    <div>
      <div class="field">
        <div>
          <div class="icon">
            <i class="iconfont icon-guanbi"></i>
          </div>
          <div class="content">
            <div class="txt" @click="login">输入关键字搜索</div>
            <i class="iconfont icon-zhaoxiangji"></i>
          </div>
          <div class="icon">
            <i class="iconfont icon-richscan_icon"></i>
          </div>
        </div>
      </div>
      <div class="news" @click="getList">
        <i class="iconfont icon-xiaoxi"></i>
      </div>
    </div>
  </header>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { Login, GetList } from "@/api/index";

export default {
  computed: {
    ...mapState(["height"]),
  },
  methods: {
    ...mapMutations(["setToken"]),
    async login() {
      const res = await Login({
        username: "123",
        password: "123",
      });
      if (res.status == 200) {
        const r = res.result || {};
        this.setToken(r.token);
      } else {
        this.$toast.fail(res.msg);
      }
    },
    async getList() {
      const res = await GetList({
        start: 0,
        size: 5,
      });
      if (res.status == 200) {
        const r = res.result || {};
        alert(JSON.stringify(r.list));
      } else {
        this.$toast(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1.76rem;
  .bg_color(rgba(255, 255, 255, 1));
  .fa(center);
  z-index: 5;

  > div {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;

    .field {
      padding-left: 0.6rem;
      padding-right: 0.3rem;
      flex: 1;
      .fa(center);

      > div {
        .size(100%, 1.2rem);
        color: @text-color-grey;
        background: @bg-color-grey;
        border-radius: 2rem;
        .fa(center);

        .icon {
          padding: 0 0.48rem;
          .fa(center);

          > i {
            font-size: 0.72rem;
            line-height: 0.72rem;
            .font_color(rgba(243, 89, 100, 1));
          }
        }

        .content {
          position: relative;
          padding-right: 0.4rem;
          flex: 1;
          .flex(space-between, center);

          &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            content: "";
            border-right: 1px solid @border-color;
          }

          .txt {
            font-size: 0.56rem;
          }

          > i {
            font-size: 0.8rem;
            line-height: 0.8rem;
          }
        }
      }
    }

    .news {
      padding-left: 0.3rem;
      padding-right: 0.6rem;

      > i {
        font-size: 0.8rem;
        line-height: 0.8rem;
        .font_color(rgba(243, 89, 100, 1));
      }
    }
  }
}
</style>